<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Tiya Club - Event Listing</title>

    <!-- CSS FILES -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <link
      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap"
      rel="stylesheet"
    />

    <link href="css/bootstrap.min.css" rel="stylesheet" />

    <link href="css/bootstrap-icons.css" rel="stylesheet" />

    <link href="css/templatemo-Tiya-golf-club.css" rel="stylesheet" />

    <!--

TemplateMo 587 Tiya Club

https://templatemo.com/tm-587-Tiya-golf-club

-->
  </head>

  <body>
    <main>
      <nav class="navbar navbar-expand-lg">
        <div class="container">
          <a class="navbar-brand d-flex align-items-center" href="index.html">
            <img src="images/logo.png" class="navbar-brand-image img-fluid" alt="Tiya Club" />
            <span class="navbar-brand-text">
              Tiya
              <small>Golf Club</small>
            </span>
          </a>

          <div class="d-lg-none ms-auto me-3">
            <a
              class="btn custom-btn custom-border-btn"
              data-bs-toggle="offcanvas"
              href="#offcanvasExample"
              role="button"
              aria-controls="offcanvasExample"
              >Member Login</a
            >
          </div>

          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-lg-auto">
              <li class="nav-item">
                <a class="nav-link" href="index.html#section_1">Home</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="index.html#section_2">About</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="index.html#section_3">Membership</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="index.html#section_4">Events</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="index.html#section_5">Contact Us</a>
              </li>

              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  id="navbarLightDropdownMenuLink"
                  role="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                  >Pages</a
                >

                <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="navbarLightDropdownMenuLink">
                  <li><a class="dropdown-item active" href="event-listing.html">Event Listing</a></li>

                  <li><a class="dropdown-item" href="event-detail.html">Event Detail</a></li>
                </ul>
              </li>
            </ul>

            <div class="d-none d-lg-block ms-lg-3">
              <a
                class="btn custom-btn custom-border-btn"
                data-bs-toggle="offcanvas"
                href="#offcanvasExample"
                role="button"
                aria-controls="offcanvasExample"
                >Member Login</a
              >
            </div>
          </div>
        </div>
      </nav>

      <div
        class="offcanvas offcanvas-end"
        data-bs-scroll="true"
        tabindex="-1"
        id="offcanvasExample"
        aria-labelledby="offcanvasExampleLabel"
      >
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasExampleLabel">Member Login</h5>

          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>

        <div class="offcanvas-body d-flex flex-column">
          <form class="custom-form member-login-form" action="#" method="post" role="form">
            <div class="member-login-form-body">
              <div class="mb-4">
                <label class="form-label mb-2" for="member-login-number">Membership No.</label>

                <input
                  type="text"
                  name="member-login-number"
                  id="member-login-number"
                  class="form-control"
                  placeholder="11002560"
                  required
                />
              </div>

              <div class="mb-4">
                <label class="form-label mb-2" for="member-login-password">Password</label>

                <input
                  type="password"
                  name="member-login-password"
                  id="member-login-password"
                  pattern="[0-9a-zA-Z]{4,10}"
                  class="form-control"
                  placeholder="Password"
                  required=""
                />
              </div>

              <div class="form-check mb-4">
                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />

                <label class="form-check-label" for="flexCheckDefault"> Remember me </label>
              </div>

              <div class="col-lg-5 col-md-7 col-8 mx-auto">
                <button type="submit" class="form-control">Login</button>
              </div>

              <div class="text-center my-4">
                <a href="#">Forgotten password?</a>
              </div>
            </div>
          </form>

          <div class="mt-auto mb-5">
            <p>
              <strong class="text-white me-3">Any Questions?</strong>

              <a href="tel: 010-020-0340" class="contact-link"> 010-020-0340 </a>
            </p>
          </div>
        </div>

        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
          <path
            fill="#3D405B"
            fill-opacity="1"
            d="M0,224L34.3,192C68.6,160,137,96,206,90.7C274.3,85,343,139,411,144C480,149,549,107,617,122.7C685.7,139,754,213,823,240C891.4,267,960,245,1029,224C1097.1,203,1166,181,1234,160C1302.9,139,1371,117,1406,106.7L1440,96L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
          ></path>
        </svg>
      </div>

      <section class="hero-section hero-50 d-flex justify-content-center align-items-center" id="section_1">
        <div class="section-overlay"></div>

        <svg viewBox="0 0 1962 178" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path fill="#3D405B" d="M 0 114 C 118.5 114 118.5 167 237 167 L 237 167 L 237 0 L 0 0 Z" stroke-width="0"></path>
          <path fill="#3D405B" d="M 236 167 C 373 167 373 128 510 128 L 510 128 L 510 0 L 236 0 Z" stroke-width="0"></path>
          <path fill="#3D405B" d="M 509 128 C 607 128 607 153 705 153 L 705 153 L 705 0 L 509 0 Z" stroke-width="0"></path>
          <path fill="#3D405B" d="M 704 153 C 812 153 812 113 920 113 L 920 113 L 920 0 L 704 0 Z" stroke-width="0"></path>
          <path
            fill="#3D405B"
            d="M 919 113 C 1048.5 113 1048.5 148 1178 148 L 1178 148 L 1178 0 L 919 0 Z"
            stroke-width="0"
          ></path>
          <path
            fill="#3D405B"
            d="M 1177 148 C 1359.5 148 1359.5 129 1542 129 L 1542 129 L 1542 0 L 1177 0 Z"
            stroke-width="0"
          ></path>
          <path
            fill="#3D405B"
            d="M 1541 129 C 1751.5 129 1751.5 138 1962 138 L 1962 138 L 1962 0 L 1541 0 Z"
            stroke-width="0"
          ></path>
        </svg>

        <div class="container">
          <div class="row">
            <div class="col-lg-6 col-12">
              <h1 class="text-white mb-4 pb-2">Event Listing</h1>

              <a href="#section_3" class="btn custom-btn smoothscroll me-3">Explore Events</a>
            </div>
          </div>
        </div>

        <svg viewBox="0 0 1962 178" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path fill="#ffffff" d="M 0 114 C 118.5 114 118.5 167 237 167 L 237 167 L 237 0 L 0 0 Z" stroke-width="0"></path>
          <path fill="#ffffff" d="M 236 167 C 373 167 373 128 510 128 L 510 128 L 510 0 L 236 0 Z" stroke-width="0"></path>
          <path fill="#ffffff" d="M 509 128 C 607 128 607 153 705 153 L 705 153 L 705 0 L 509 0 Z" stroke-width="0"></path>
          <path fill="#ffffff" d="M 704 153 C 812 153 812 113 920 113 L 920 113 L 920 0 L 704 0 Z" stroke-width="0"></path>
          <path
            fill="#ffffff"
            d="M 919 113 C 1048.5 113 1048.5 148 1178 148 L 1178 148 L 1178 0 L 919 0 Z"
            stroke-width="0"
          ></path>
          <path
            fill="#ffffff"
            d="M 1177 148 C 1359.5 148 1359.5 129 1542 129 L 1542 129 L 1542 0 L 1177 0 Z"
            stroke-width="0"
          ></path>
          <path
            fill="#ffffff"
            d="M 1541 129 C 1751.5 129 1751.5 138 1962 138 L 1962 138 L 1962 0 L 1541 0 Z"
            stroke-width="0"
          ></path>
        </svg>
      </section>

      <section class="events-section section-padding" id="section_2">
        <div class="container">
          <div class="row">
            <div class="col-lg-12 col-12">
              <h2 class="mb-lg-5 mb-4">Latest events</h2>
            </div>

            <div class="col-lg-6 col-12 mb-5 mb-lg-0">
              <div class="custom-block-image-wrap">
                <a href="event-detail.html">
                  <img src="images/anna-rosar-ew-olGvgCCs-unsplash.jpg" class="custom-block-image img-fluid" alt="" />

                  <i class="custom-block-icon bi-link"></i>
                </a>

                <div class="custom-block-date-wrap">
                  <strong class="text-white">18 Feb 2023</strong>
                </div>

                <div class="custom-btn-wrap">
                  <a href="event-detail.html" class="btn custom-btn">Buy Ticket</a>
                </div>
              </div>

              <div class="custom-block-info">
                <a href="event-detail.html" class="events-title mb-2">Single Tournament</a>

                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit do eiusmod tempor</p>

                <div class="border-top mt-4 pt-3">
                  <div class="d-flex flex-wrap align-items-center mb-1">
                    <span class="custom-block-span">Location:</span>

                    <p class="mb-0">National Center, NYC</p>
                  </div>

                  <div class="d-flex flex-wrap align-items-center">
                    <span class="custom-block-span">Ticket:</span>

                    <p class="mb-0">$150</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-6 col-12">
              <div class="custom-block-image-wrap">
                <a href="event-detail.html">
                  <img src="images/frederik-rosar-NDSZcCfnsbY-unsplash.jpg" class="custom-block-image img-fluid" alt="" />

                  <i class="custom-block-icon bi-link"></i>
                </a>

                <div class="custom-block-date-wrap">
                  <strong class="text-white">24 Feb 2023</strong>
                </div>

                <div class="custom-btn-wrap">
                  <a href="event-detail.html" class="btn custom-btn">Buy Ticket</a>
                </div>
              </div>

              <div class="custom-block-info">
                <a href="event-detail.html" class="events-title mb-2">Group Tournaments</a>

                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit do eiusmod tempor</p>

                <div class="border-top mt-4 pt-3">
                  <div class="d-flex flex-wrap align-items-center mb-1">
                    <span class="custom-block-span">Location:</span>

                    <p class="mb-0">National Center, NYC</p>
                  </div>

                  <div class="d-flex flex-wrap align-items-center">
                    <span class="custom-block-span">Ticket:</span>

                    <p class="mb-0">$250</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="events-section events-listing-section section-bg section-padding" id="section_3">
        <div class="container">
          <div class="row">
            <div class="col-lg-12 col-12">
              <h2 class="mb-3">Upcoming Events</h2>
            </div>

            <div class="row custom-block mb-3">
              <div class="col-lg-2 col-md-4 col-12 order-2 order-md-0 order-lg-0">
                <div class="custom-block-date-wrap d-flex d-lg-block d-md-block align-items-center mt-3 mt-lg-0 mt-md-0">
                  <h6 class="custom-block-date mb-lg-1 mb-0 me-3 me-lg-0 me-md-0">24</h6>

                  <strong class="text-white">Feb 2023</strong>
                </div>
              </div>

              <div class="col-lg-4 col-md-8 col-12 order-1 order-lg-0">
                <div class="custom-block-image-wrap">
                  <a href="event-detail.html">
                    <img src="images/professional-golf-player.jpg" class="custom-block-image img-fluid" alt="" />

                    <i class="custom-block-icon bi-link"></i>
                  </a>
                </div>
              </div>

              <div class="col-lg-6 col-12 order-3 order-lg-0">
                <div class="custom-block-info mt-2 mt-lg-0">
                  <a href="event-detail.html" class="events-title mb-3">Private Golf Courses</a>

                  <p class="mb-0">
                    You can browse many different categories of CSS templates using
                    <a href="https://templatemo.com/tag" target="_blank">tags</a> on TemplateMo website. Feel free to browse more
                    templates and download them free instantly.
                  </p>

                  <div class="d-flex flex-wrap border-top mt-4 pt-3">
                    <div class="mb-4 mb-lg-0">
                      <div class="d-flex flex-wrap align-items-center mb-1">
                        <span class="custom-block-span">Location:</span>

                        <p class="mb-0">National Center, NYC</p>
                      </div>

                      <div class="d-flex flex-wrap align-items-center">
                        <span class="custom-block-span">Ticket:</span>

                        <p class="mb-0">$150</p>
                      </div>
                    </div>

                    <div class="d-flex align-items-center ms-lg-auto">
                      <a href="event-detail.html" class="btn custom-btn">Buy Ticket</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row custom-block custom-block-bg">
              <div class="col-lg-2 col-md-4 col-12 order-2 order-md-0 order-lg-0">
                <div class="custom-block-date-wrap d-flex d-lg-block d-md-block align-items-center mt-3 mt-lg-0 mt-md-0">
                  <h6 class="custom-block-date mb-lg-1 mb-0 me-3 me-lg-0 me-md-0">16</h6>

                  <strong class="text-white">Mar 2023</strong>
                </div>
              </div>

              <div class="col-lg-4 col-md-8 col-12 order-1 order-lg-0">
                <div class="custom-block-image-wrap">
                  <a href="event-detail.html">
                    <img
                      src="images/girl-taking-selfie-with-friends-golf-field.jpg"
                      class="custom-block-image img-fluid"
                      alt=""
                    />

                    <i class="custom-block-icon bi-link"></i>
                  </a>
                </div>
              </div>

              <div class="col-lg-6 col-12 order-3 order-lg-0">
                <div class="custom-block-info mt-2 mt-lg-0">
                  <a href="event-detail.html" class="events-title mb-3">Group tournament activities</a>

                  <p class="mb-0">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                    magna aliqua.
                  </p>

                  <div class="d-flex flex-wrap border-top mt-4 pt-3">
                    <div class="mb-4 mb-lg-0">
                      <div class="d-flex flex-wrap align-items-center mb-1">
                        <span class="custom-block-span">Location:</span>

                        <p class="mb-0">National Center, NYC</p>
                      </div>

                      <div class="d-flex flex-wrap align-items-center">
                        <span class="custom-block-span">Ticket:</span>

                        <p class="mb-0">$250</p>
                      </div>
                    </div>

                    <div class="d-flex align-items-center ms-lg-auto">
                      <a href="event-detail.html" class="btn custom-btn">Buy Ticket</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="site-footer">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 col-12 me-auto mb-5 mb-lg-0">
            <a class="navbar-brand d-flex align-items-center" href="index.html">
              <img src="images/logo.png" class="navbar-brand-image img-fluid" alt="" />
              <span class="navbar-brand-text">
                Tiya
                <small>Golf Club</small>
              </span>
            </a>
          </div>

          <div class="col-lg-3 col-12">
            <h5 class="site-footer-title mb-4">Join Us</h5>

            <p class="d-flex border-bottom pb-3 mb-3 me-lg-3">
              <span>Mon-Fri</span>
              6:00 AM - 6:00 PM
            </p>

            <p class="d-flex me-lg-3">
              <span>Sat-Sun</span>
              6:30 AM - 8:30 PM
            </p>
            <br />
            <p class="copyright-text">Copyright © 2048 Tiya Club</p>
          </div>

          <div class="col-lg-2 col-12 ms-auto">
            <ul class="social-icon mt-lg-5 mt-3 mb-4">
              <li class="social-icon-item">
                <a href="#" class="social-icon-link bi-instagram"></a>
              </li>

              <li class="social-icon-item">
                <a href="#" class="social-icon-link bi-twitter"></a>
              </li>

              <li class="social-icon-item">
                <a href="#" class="social-icon-link bi-whatsapp"></a>
              </li>
            </ul>

            <p class="copyright-text">Design: <a rel="nofollow" href="https://templatemo.com" target="_blank">TemplateMo</a></p>
          </div>
        </div>
      </div>

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#81B29A"
          fill-opacity="1"
          d="M0,224L34.3,192C68.6,160,137,96,206,90.7C274.3,85,343,139,411,144C480,149,549,107,617,122.7C685.7,139,754,213,823,240C891.4,267,960,245,1029,224C1097.1,203,1166,181,1234,160C1302.9,139,1371,117,1406,106.7L1440,96L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
        ></path>
      </svg>
    </footer>

    <!-- JAVASCRIPT FILES -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/jquery.sticky.js"></script>
    <script src="js/custom.js"></script>
  </body>
</html>
